<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>视频</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>


    <link href="/lib/video-js.css" rel="stylesheet"/>
    <script src="/lib/video.js" type="text/javascript"></script>

    <!-- <link href="http://vjs.zencdn.net/vjs-version/video-js.css" rel="stylesheet"> -->

    <!--<link type="text/css" rel="stylesheet" href="http://vjs.zencdn.net/5.4.4/video-js.css"/>-->
    <!--<script src="http://vjs.zencdn.net/5.4.4/video.js"></script>-->


    <script src="/lib/jquery-2.1.4.min.js"></script>
    <script src="/lib/socket.io.js"></script>
    <script src="/js/app.js"></script>

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="/lib/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="/lib/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="/lib/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link rel="stylesheet"
  href="/lib/animate.min.css">


    <style type="text/css">
        ::-webkit-scrollbar{
            display:none;
        }
    .vjs-default-skin.vjs-paused .vjs-big-play-button
    {
        display: none;
    }


    </style>



</head>
<body style="background-color: black;padding:0;margin:0;">
<div style="padding-left:125pt;">
    <img id = "cover" src="http://localhost:8088/res-img/cover.jpeg" width="1067"  height="800" ></img>
</div>

<video id="video1"  class="video-js vjs-default-skin" preload='auto' autoplay="autoplay" width="1400" height="777" data-setup='{ }'>
</video>

<video id="video2" class="video-js vjs-default-skin" preload='auto'  autoplay="autoplay" width="1400" height="777" data-setup='{ }'>
</video>
<video id="video3" class="video-js vjs-default-skin" preload='auto' autoplay="autoplay" width="1400" height="777" data-setup='{ }'>
</video>

<video id="video4" class="video-js vjs-default-skin" preload='auto' autoplay="autoplay" width="1400" height="777" data-setup='{ }'>
</video>

<video id="video5" class="video-js vjs-default-skin" preload='auto' autoplay="autoplay" width="1400" height="777" data-setup='{ }'>
</video>

<video id="video6" class="video-js vjs-default-skin" preload='auto' autoplay="autoplay" width="1400" height="777" data-setup='{ }'>
</video>
<video id="video7" class="video-js vjs-default-skin" preload='auto' autoplay="autoplay" width="1400" height="777" data-setup='{ }'>
</video>
<video id="video8" class="video-js vjs-default-skin" preload='auto' autoplay="autoplay" width="1400" height="777" data-setup='{ }'>
</video>
<video id="video9" class="video-js vjs-default-skin" preload='auto' autoplay="autoplay" width="1400" height="777" data-setup='{ }'>
</video>

<!--<video id="video10" class="video-js vjs-default-skin center-block" preload='auto' autoplay="autoplay" width="1650" height="900" data-setup='{ }'>-->
<!--</video>-->
<!--<video id="video11" class="video-js vjs-default-skin center-block" preload='auto' autoplay="autoplay" width="1650" height="900" data-setup='{ }'>-->
<!--</video>-->
<!--<video id="video12" class="video-js vjs-default-skin center-block" preload='auto' autoplay="autoplay" width="1650" height="900" data-setup='{ }'>-->
<!--</video>-->
<script>


var currentVideoIndex = 0;
var playerArray = new Array();
var defaultVideo = 'http://p29o6sceb.bkt.clouddn.com/3752Neutral.mp4';//'http://192.168.1.166:8088/video/1.mp4';//'http://test.xy.com:8088/video/1.mp4';//rtsp://test.xy.com:8554/vod/test.264';//
var currentRateLevel;

var socket =  io.connect(ServerUrl);

var VIDEO_HELLO = 0;
var VIDEO_NEUTRAL = 1;
var VIDEO_HAPPINESS = 2;
var VIDEO_ANGER = 3;
var VIDEO_FEAR = 4;
var VIDEO_SURPRISE = 5;
var VIDEO_SADNESS = 6;
var VIDEO_IDLE = 7;
var VIDEO_DISGUST = 8;

// var VIDEO_TWO_PERSON = 8;
// var VIDEO_THREE_PERSON = 9;
// var VIDEO_FOUR_PERSON = 10;
// var VIDEO_FIVE_PERSON = 11;

var noPeopleRoundCount = 0;

socket.on('connect', function() {
    console.log("Client has connected to the server!");
});

socket.on('next-round', function(data) {
    $("#cover").show();
});

socket.on('people', function(data) {
    if(data.result.hasOwnProperty("faces") == false){
        noPeopleRoundCount = 0
        return;
    }
    var faces = data.result.faces;

    if(faces.length == 0){
        noPeopleRoundCount += 1;
    }else{
        noPeopleRoundCount = 0;
        playVideo(VIDEO_HELLO);
    }

    if(noPeopleRoundCount >= 5){
        //temp remove playVideo(VIDEO_IDLE);
        noPeopleRoundCount = 0;
        return;
    }

});

socket.on('face', function(data) {
    faceProcess(data);
});

socket.on('mosaic', function(data) {

});

socket.on('disconnect', function() {
    console.log("The client has disconnected!");
});

function sendDisconnect() {
    socket.disconnect();
}



function faceProcess(data) {

    console.log(data);

    var faces = data.result.faces;

    var current_surprise_count = 0;
    var current_happiness_count = 0;
    var current_neutral_count = 0;
    var current_sadness_count = 0;
    var current_disgust_count = 0;
    var current_anger_count = 0;
    var current_fear_count = 0;

    var faceCount = faces.length > FaceCount ? FaceCount : faces.length;

    var emotionSet = new Set();
    for(var i = 0; i < faceCount; ++i){
        var emotion = faces[i].attributes.emotion;
        if(emotion.surprise > 60){
            current_surprise_count += 1;
            emotionSet.add(VIDEO_SURPRISE);
        }
        else if(emotion.happiness > 60){
            current_happiness_count += 1;
            emotionSet.add(VIDEO_HAPPINESS);
        }
        else if(emotion.neutral > 60){
            current_neutral_count += 1;
            emotionSet.add(VIDEO_NEUTRAL);
        }
        else if(emotion.sadness > 60){
            current_sadness_count += 1;
            emotionSet.add(VIDEO_SADNESS);
        }
        else if(emotion.disgust > 60){
            current_disgust_count += 1;
            emotionSet.add(VIDEO_DISGUST);
        }
        else if(emotion.anger > 60){
            current_anger_count += 1;
            emotionSet.add(VIDEO_ANGER);
        }
        else if(emotion.fear > 60){
            current_fear_count += 1;
            emotionSet.add(VIDEO_FEAR);
        }
    }

    var list = Array.from(emotionSet);
   // alert(list);

    for(var i = 0 ;i < playerArray.length; ++i){
        $("#video" +(i+1)).hide();
    }
    $("#cover").hide();
    playIndex = 0;
    playRecursively(list);
}


var playIndex = 0;
function playRecursively(list){

    if( playIndex >= list.length ){
        socket.emit('play-finish', {});
        $("#video" +(playIndex+1)).hide();
        $("#cover").show();
        return;
    }

    $("#video" +(list[playIndex]+1)).show();
    playerArray[list[playIndex]].load();
    playerArray[list[playIndex]].play();

    playerArray[list[playIndex]].on('ended', function () {
        console.log('结束播放');
        $("#video" +(list[playIndex]+1)).hide();
        playIndex += 1;
        playRecursively(list);
    });

}

function playVideo(index){
    if(currentVideoIndex == index){
        return;
    }

    currentVideoIndex = index;
    $("#cover").hide();
    for(var i = 0 ;i < playerArray.length; ++i){
        if(i == index){
            $("#video" +(index+1)).show();

            playerArray[index].load();
            playerArray[index].play();
        }else{
            $("#video" +(i+1)).hide();
        }
    }
}

function loadVideo(name,index,url){


    videojs(name).ready(function () {
        playerArray[index] = this;

        playerArray[index].on('play', function () {
            console.log('开始/恢复播放');
        });
        playerArray[index].on('pause', function () {
            console.log('暂停播放');
        });
        playerArray[index].on('ended', function () {
            console.log('结束播放');

            // if(index == currentVideoIndex){
            //     socket.emit('play-finish', {video_index:index});
            //     $("#video" +(index+1)).hide();
            //     $("#cover").show();
            // }
        });


        playerArray[index].src({type: 'video/mp4', src: url});
        playerArray[index].play();


//        playerArray[index].on('click', function(e){
//            var vid = playerArray[0];
//            vid.play();
//            if (vid.requestFullscreen) {
//                vid.requestFullscreen();
//            } else if (vid.mozRequestFullScreen) {
//                vid.mozRequestFullScreen();
//            } else if (vid.webkitRequestFullscreen) {
//                vid.webkitRequestFullscreen();
//            }
//        });

    });
}

var cdVideoCheck;
function countdownVideoCheck(){
    clearInterval(cdVideoCheck);
    cdVideoCheck = setInterval(function(){

        var video = playerArray[currentVideoIndex];
        var isPlaying = video.currentTime() > 0 && !video.paused() && !video.ended()
            && video.readyState() > 2;

        console.log("video.currentTime " + video.currentTime());
        console.log("video.paused " + video.paused());
        console.log("video.ended " + video.ended());
        console.log("video.readyState " + video.readyState());

        if (!isPlaying) {
            console.log("video"+(currentVideoIndex+1)+" is paused ");
            console.log("play it");
            video.load();
            video.play();
        }

    },5000)
}
countdownVideoCheck();


(function ($) {
        $(document).ready(function () {
            // An example of playing with the Video.js javascript API
            // Will start the video and then switch the source 3 seconds latter
            // You can look at the doc there: http://docs.videojs.com/docs/guides/api.html

//            loadVideo("video1",0,"http://p29o6sceb.bkt.clouddn.com/3752Neutral.mp4");
//            loadVideo("video2",1,"http://p29o6sceb.bkt.clouddn.com/117Happy.mp4");
//            loadVideo("video3",2,"http://p29o6sceb.bkt.clouddn.com/117Sad.mp4");
//            loadVideo("video4",3,"http://p29o6sceb.bkt.clouddn.com/117Surprise.mp4");
//            loadVideo("video5",4,"http://p29o6sceb.bkt.clouddn.com/her2.mp4");
//            loadVideo("video6",5,"http://p29o6sceb.bkt.clouddn.com/3752Crazy.mp4");
//            loadVideo("video7",6,"http://p29o6sceb.bkt.clouddn.com/3752Crazy.mp4");



            loadVideo("video1",VIDEO_HELLO,ResVideoUrl + "hello.mp4");
            loadVideo("video2",VIDEO_NEUTRAL,ResVideoUrl + "neutral.mp4");
            loadVideo("video3",VIDEO_HAPPINESS,ResVideoUrl + "happiness.mp4");
            loadVideo("video4",VIDEO_ANGER,ResVideoUrl + "anger.mp4");
            loadVideo("video5",VIDEO_FEAR,ResVideoUrl + "fear.mp4");
            loadVideo("video6",VIDEO_SURPRISE,ResVideoUrl + "surprise.mp4");
            loadVideo("video7",VIDEO_SADNESS,ResVideoUrl + "sadness.mp4");
            loadVideo("video8",VIDEO_IDLE,ResVideoUrl + "idle.mp4");
            loadVideo("video9",VIDEO_DISGUST,ResVideoUrl + "disgust.mp4");

            // loadVideo("video9",VIDEO_TWO_PERSON,ResVideoUrl + "two_person.mp4");
            // loadVideo("video10",VIDEO_TWO_PERSON,ResVideoUrl + "three_person.mp4");
            // loadVideo("video11",VIDEO_TWO_PERSON,ResVideoUrl + "four_person.mp4");
            // loadVideo("video12",VIDEO_TWO_PERSON,ResVideoUrl + "five_person.mp4");

           // loadVideo("video7",6,ResVideoUrl + "3.mp4");

//            $('.vjs-fullscreen-control').click();
        });
    })(jQuery);


//    var overlay= document.getElementById('overlay');
//    var video= document.getElementById('video');
//      video.addEventListener('progress', function() {
//        var show= video.currentTime>=5 && video.currentTime<10;
//        //overlay.style.visibility= show? 'visible' : 'visible';
//      }, false);


//     setTimeout(function () {
//         $("#cover").hide();
//         var emotionSet = new Set();
//         emotionSet.add(VIDEO_HELLO);
//         emotionSet.add(VIDEO_NEUTRAL);
//         emotionSet.add(VIDEO_HAPPINESS);
//         emotionSet.add(VIDEO_ANGER);
//         emotionSet.add(VIDEO_FEAR);
//         emotionSet.add(VIDEO_SURPRISE);
//         emotionSet.add(VIDEO_SADNESS);
//         emotionSet.add(VIDEO_IDLE);
//         emotionSet.add(VIDEO_DISGUST);
//
//         var list = Array.from(emotionSet);
// // alert(list);
//
//         for(var i = 0 ;i < playerArray.length; ++i){
//             $("#video" +(i+1)).hide();
//         }
//         playIndex = 0;
//         playRecursively(list);
//     },5000)

</script>
</body>
</html>